<template>
	<view class="hot-container">
		<!-- login -->
		<image class="logo" src="@/static/images/logo.png" mode="aspectFit"></image>
		<my-search></my-search>
		<view class="tab-sticky">
			<my-tabs :tabData="tabData" :defaultIndex="currentIndex"
				:config="{textColor:'#00ff00', activeTextColor:'#ff00ff'}" @click="tabClick"></my-tabs>
		</view>
		<!--基于swiper 的 list -->
		<!-- current 表示当前展示哪个 swiperitem -->
		<!-- 需要给定高度 -->
		<!-- 卡顿问题 swiper 动画未加载完 就进行获取数据 -->
		<!-- 完成 tabs 与 swiper 联动切换 -->
		<!-- 功能补充 tabs 具备吸顶效果 控制列表展示位置 -->
		<swiper class="swiper" :current="currentIndex" :style="{height: currentSwiperHeight + 'px'}"
			@animationfinish="onSwiperEnd" @change="onSwiperChange">
			<!-- swiper 的数量，需要由tabData 进行决定 -->
			<swiper-item class="swiper-item" v-for="(tabItem, tabIndex) in tabData" :key="tabIndex">
				<view class="">
					<!-- 加载动画 -->
					<uni-load-more status="loading" v-if="isLoading"></uni-load-more>
					<!-- 列表 -->
					<block>
						<!-- 列表循环数据 -->
						<hot-list-item :class="'hot-list-item-' + tabIndex" v-for="(item,index) in listData[tabIndex]" :data="item"
							:ranking="index + 1" :key="index"></hot-list-item>
					</block>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		getHotTabs,
		getHotListFromTabType
	} from 'api/hot';
	export default {
		data() {
			return {
				// tabs 数据源
				tabData: [],
				// 当前切换的index
				currentIndex: 0,
				// 列表数据加载过程
				isLoading: false,
				// 以index为key, 对应的list 为val
				listData: {},
				// 当前swiper的高度
				currentSwiperHeight: 0,
				// 以index 为key,对应的swiper的高度为val
				swiperHeightData: {},
				// 当前滚动的距离
				currentPageScrollTop: 0
			};
		},
		created() {
			this.getHotTabs()
		},
		// 监听页面的滚动
		onPageScroll(res) {
			// console.log(res);
			this.currentPageScrollTop = res.scrollTop
		},
		methods: {
			// 获取热搜标题数据
			async getHotTabs() {
				const {
					data: res
				} = await getHotTabs()
				// console.log(res);
				this.tabData = res.list
				// 获取列表数据
				this.getHotListFromTabType()
			},
			// 动画完成
			onSwiperEnd() {
				// 判断缓存是否存在，不存在再去获取数据
				if (!this.listData[this.currentIndex]) {
					this.getHotListFromTabType()
					return
				}
				this.currentSwiperHeight = this.swiperHeightData[this.currentIndex]
			},

			// list 列表数据
			async getHotListFromTabType() {
				// 展示loading
				this.isLoading = true
				// 判断缓存是否有数据，不存在啧重新获取数据
				// if (!this.listData[this.currentIndex]) {
				// 获取列表数据
				const id = this.tabData[this.currentIndex].id
				const {
					data: res
				} = await getHotListFromTabType(id)
				// 把数据保存到本地
				this.listData[this.currentIndex] = res.list
				// console.log(res.list);
				// }
				// 隐藏loading
				this.isLoading = false
				// 渲染数据完成，计算高度
				setTimeout(async () => {
					// 获取当前swiper的高
					this.currentSwiperHeight = await this.getCurrentSwiperHeight()
					// 放入缓存中
					this.swiperHeightData[this.currentIndex] = this.currentSwiperHeight
				}, 0)
			},
			// tab item的点击事件
			tabClick(index) {
				this.currentIndex = index
				// this.getHotListFromTabType()
			},
			// 计算当前swiper的高度
			getCurrentSwiperHeight() {
				// 1.拿到所有的item(异步) 及 高度
				return new Promise((resolve, reject) => {
					// 累加和

					let sum = 0
					const query = uni.createSelectorQuery().in(this)
					query
						.selectAll(`.hot-list-item-${this.currentIndex}`)
						.boundingClientRect(res => {
							// console.log(res);
							res.forEach((item) => {
								// 拿到所有的高
								sum += item.height
							})
							resolve(sum)

						})
						.exec()
				})

			},
			// 监听swiper的切换事件
			onSwiperChange(e) {
				if (this.currentPageScrollTop > 130) {
					// 控制列表的滚动位置
					uni.pageScrollTo({
						scrollTop: 130
					})
				}
				this.currentIndex = e.detail.current
			}
		},

	}
</script>

<style lang="scss" scoped>
	.hot-container {
		background-color: $uni-bg-color;

		.logo {
			width: 100%;
			height: 80px;
		}

		.tab-sticky {
			position: -webkit-sticky;
			position: sticky;
			z-index: 99;
			top: 0;
		}
	}
</style>